<template>
  <div class="service-content pt-4 pb-4">
    <el-row class="pb-5">
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" v-if="isShow">
        <div class="flex title-content justify-center pt-5 pb-10">
          <span class="mt-5"></span>
          <h3 class="pr-4 pl-4">{{ serviceInfo.title }}</h3>
          <span class="mt-5"></span>
        </div>
      </el-col>
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
    </el-row>
    <el-row>
      <ServiceItem :data="serviceInfo.list" />
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { getServiceList } from "@/api/service_list";
const isShow = ref(false);
const serviceInfo = ref({});

const getServiceInfo = async () => {
  const res = await getServiceList();
  serviceInfo.value = res.data.service[0];
  for (let index = 0; index < serviceInfo.value.list.length; index++) {
    const item = serviceInfo.value.list[index];
    const str = `${window.location.origin}${item.bgurl}`;
    item.bgurl = str;
    console.log("item", item);
  }
  isShow.value = true;
};
onMounted(() => {
  getServiceInfo();
});
</script>

<style lang="scss" scoped>
.service-content {
  font-size: var(--text-primary-size);
  .title-content {
    color: var(--color-text-title);
    span {
      width: 40px;
      height: 1px;
      background-color: var(--color-text-title);
    }
    h3 {
      font-size: var(--text-h3-size);
    }
  }
}
</style>
